<template>
  <u-popup
    v-model="innerShow"
    mode="bottom"
    :closeable="false"
    @close="closePop"
  >
    <scroll-view
      :scroll-y="true"
      :scroll-into-view="scrollIntoViewId"
      scroll-with-animation
      class="popContent"
    >
      <view
        class="popContentItem"
        :id="'id' + item.value"
        v-for="item in list"
        :key="item.value"
        @click="itemClick(item)"
      >
        <text>{{ item.label }}</text>
        <u-icon
          v-show="currentValue === item.value"
          name="checkbox-mark"
          color="#2979ff"
          size="28"
        ></u-icon>
      </view>
    </scroll-view>
    <view class="popContentItem popFooter" @click="closePop"> 取消 </view>
  </u-popup>
</template>

<script setup>
import { ref, watch, nextTick } from "vue";

const props = defineProps({
  defaultValue: {
    type: Object,
    default: "",
  },
  list: {
    type: Array,
    default: () => [],
  },
  show: {
    type: Boolean,
    default: false,
  },
});

console.log("props", props);

const emit = defineEmits(["confirm", "update:show"]);
const innerShow = ref(false);

const currentValue = ref(props.defaultValue);
const scrollIntoViewId = ref("");

watch(
  () => props.show,
  (newVal) => {
    if (newVal) {
      innerShow.value = true;
      currentValue.value = props.defaultValue;
      nextTick(() => {
        scrollIntoViewId.value = "id" + props.defaultValue;
      });
    } else {
      innerShow.value = false;
      currentValue.value = "";
    }
  }
);

const itemClick = (item) => {
  currentValue.value = item.value;
  emit("confirm", item);
  closePop();
};

const closePop = () => {
  innerShow.value = false;
  emit("update:show", false);
};
</script>

<style scoped>
.popContent {
  max-height: 45vh;
  border-bottom: 10px solid #efefef;
}
.popContentItem {
  padding: 1rem;
  border-bottom: 1px solid #f4f5f7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.popFooter {
  justify-content: center;
}
</style>
